<div class="page page-table-static clearfix">

    <ol class="breadcrumb breadcrumb-small">
        <li>Tables</li>
        <li class="active"><a href="#/tables/static-table">Static Tables</a>
        </li>
    </ol>

    <div class="page-wrap">

        <div class="row">
            <div class="col-lg-5">
                <div class="panel panel-lined mb30">
                    <div class="panel-heading"><i>Basic Striped</i>
                    </div>
                    <!-- Table Start -->
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>First Name</th>
                                <th>Username</th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>Mark</td>
                                <td>@mto</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>Jacob</td>
                                <td>@fat</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>Larry</td>
                                <td>@twitter</td>
                            </tr>

                        </tbody>
                    </table>
                    <!-- Table End -->
                </div>
            </div>


            <div class="col-lg-7">
                <div class="panel panel-lined mb30 table-responsive">
                    <div class="panel-heading"><i>Work Progress</i>
                    </div>
                    <!-- Table Start -->
                    <table class="table">
                        <thead>
                            <tr>
                                <th class="col-lg-4">Tasks</th>
                                <th class="col-lg-6">Progress</th>
                                <th class="col-lg-2">Status</th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr>
                                <td>Designing Layout</td>
                                <td>
                                    <progressbar value="90" class="progress-xs" type="success"></progressbar>
                                </td>
                                <td>
                                    <label class="label label-success">Completed</label>
                                </td>
                            </tr>
                            <tr>
                                <td>Coding Theme</td>
                                <td>
                                    <progressbar value="55" class="progress-xs" type="info"></progressbar>
                                </td>
                                <td>
                                    <label class="label label-info">Due</label>
                                </td>
                            </tr>
                            <tr>
                                <td>Testing</td>
                                <td>
                                    <progressbar value="20" class="progress-xs" type="danger"></progressbar>
                                </td>
                                <td>
                                    <label class="label label-danger">Blocked</label>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
        <!-- #end row -->


        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-lined mb30 table-responsive">
                    <div class="panel-heading"><i>Responsive Full Width</i>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-lg-6 left">
                                <div class="btn-group btn-group-sm">
                                    <button type="button" class="btn btn-default" btn-checkbox ng-model="tableModel.bordered">Bordered</button>
                                    <button type="button" class="btn btn-default" btn-checkbox ng-model="tableModel.striped">Striped</button>
                                    <button type="button" class="btn btn-default" btn-checkbox ng-model="tableModel.condensed">Condensed</button>
                                    <button type="button" class="btn btn-default" btn-checkbox ng-model="tableModel.hover">Hover</button>
                                </div>
                            </div>
                            <div class="col-lg-3 right">
                                <div class="input-group input-group-sm">
                                    <input type="text" class="form-control" placeholder="Search Now">
                                    <span class="input-group-btn">
										<button type="button" class="btn btn-default">Go</button>
									</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <table class="table" ng-controller="ResponsiveTableDemoCtrl" ng-class="{ 
							'table-bordered': tableModel.bordered, 
							'table-striped': tableModel.striped,
							'table-condensed': tableModel.condensed,
							'table-hover': tableModel.hover }">
                        <thead>
                            <tr>
                                <th class="col-lg-1">
                                    <button type="button" class="btn btn-default btn-sm fa fa-trash">
                                </th>
                                <th>Post</th>
                                <th>Author</th>
                                <th>Categories</th>
                                <th>Tags</th>
                                <th class="col-lg-2">Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="data in responsiveData">
                                <td>
                                    <div class="ui-checkbox ui-checkbox-primary">
                                        <label>
                                            <input type="checkbox"><span></span>
                                        </label>
                                    </div>
                                </td>
                                <td>{{data.post}}</td>
                                <td>{{data.author}}</td>
                                <td>{{data.categories}}</td>
                                <td>
                                    <label class="label label-{{data.tagColor}} mr5" ng-repeat="tag in data.tags">{{tag}}</label>
                                </td>
                                <td>{{data.date}}</td>
                            </tr>
                        </tbody>
                    </table>

                    <div class="panel-footer clearfix">
                        <pagination boundary-links="true" total-items="60" ng-model="currentPage" class="pagination-xs right" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>
                    </div>
                </div>
            </div>
        </div>


    </div>
    <!-- #end page-wrap -->
</div>